<template>
	<view>

		<u-navbar :safeAreaInsetTop="true" leftIcon=" " title="任务中心" :autoBack="false"
			:bgColor="'rgba(255,255,255,'+opc+')'" placeholder>

		</u-navbar>
		<image src="/static/common/bg1.png" class="pagebg1" mode=""></image>
		<view class="pagecon">
			<view class="top">
				<image src="/static/task/hb.png" class="top__hb" mode=""></image>
				<image src="/static/task/yun.png" class="top__yun" mode=""></image>
				<view class="u-flex u-flex-items-end" style="padding-top: 75rpx;">
					<view class="top__num">
						{{userInfo.score}}
					</view>
					<view class="top__text">
						积分
					</view>
				</view>
				<view class="u-flex u-flex-y-center top__t" @click="navto('/pages/points/details')">
					积分明细 <u-icon name="arrow-right" size="20rpx"></u-icon>
				</view>
				<u-button @click="navto('/pages/points/raffle')"
					:customStyle="{width:'180rpx',height:'68rpx',padding:0,fontSie:'26rpx',margin:'0 0 0 42rpx',}"
					shape='circle' color="#ff5840" text="积分抽奖"></u-button>
			</view>
			<view class="con">
				<view class="box">
					<view class="box__item" v-for="(item,index) in list" :key="index" @click="clickl(item)">
						<image :src="'/static/task/l'+index+'.png'" class="box__item__icon" mode=""></image>
						<view class="" style="flex: 1;">
							<view class="box__item__name">
								{{item.name}}
							</view>
							<view class="box__item__tip">
								{{item.tip}}
							</view>
						</view>
						<u-button :customStyle="{width:'136rpx',height:'61rpx',padding:0,fontSie:'24rpx',margin:'0',}"
							shape='circle' color="#ff5840" :text="item.btn"></u-button>
					</view>


				</view>
			</view>
		</view>
		<u-popup mode='center' @close="show=false" bgColor='transparent' overlayStyle="z-index:10098" zIndex='10099'
			:show='show'>
			<view class="popbox">
				<image src="/static/points/popbg.png" class="popbox__bg" mode=""></image>
				<image src="/static/points/gdcar.png" class="popbox__gdcar" mode=""></image>
				<image src="/static/points/gdtitle.png" class="popbox__title" mode=""></image>
				<view class="popbox__con">
					<image src="/static/points/gdbg.png" class="popbox__con__bg" mode=""></image>
					<view class="" style="position: relative;margin-top: 68rpx;margin-left: 60rpx;">
						<!-- 	<view class="popbox__con__item">
							1.消费满10000额度可升级成平台股东
						</view>
						<view class="popbox__con__item">
							2.带货满10000额度可升级成平台股东
						</view> -->
					</view>
				</view>
				<view class="popbox__text">
					股东分成比例=所有股东分成总比例/当前股东总
				</view>
				<image @click="show=false" src="/static/points/close-l.png" class="popbox__close" mode=""></image>
			</view>
		</u-popup>
		<tabbar :current="3"></tabbar>
	</view>
</template>

<script>
	import {
		userInfo
	} from "@/request/api/my.js"
	export default {
		data() {
			return {
				opc: 0,
				userInfo: {
					score: 0
				},
				list: [{
						name: '商品带货',
						tip: '用户购买就可以获得佣金',
						url: '/pages/personal/authentication',
						type: 1,
						btn: '去带货'
					},
					{
						name: '邀请好友',
						tip: '邀请用户可以获得奖励',
						url: '/pages/personal/invitation',
						type: 1,
						btn: '去邀请'
					},
					{
						name: '积分升值',
						tip: '积分每天根据情况实时变动',
						url: '/pages/points/appreciation',
						type: 1,
						btn: '去查看'
					},
					{
						name: '积分兑换',
						tip: '积分可以兑换商品',
						url: '/pages/points/shop',
						type: 1,
						btn: '去兑换'
					},
					{
						name: '成为股东',
						tip: '股东每天可以获得固定积分',
						url: '',
						type: 2,
						btn: '去查看'
					},
				],
				show: false
			};
		},
		onLoad() {
			uni.hideTabBar()
		},
		onPageScroll(e) {
			if (e.scrollTop == 0) {
				this.opc = 0
			} else {
				this.opc = 1
			}
		},
		onShow() {
			userInfo().then(res => {
				this.userInfo = res.data;
			})
		},
		methods: {
			clickl(item) {
				if (!item.url) {
					uni.$u.toast('开发中');
					return
				}
				if (item.type == 2) { //弹框
					this.show = true
				}
				if (item.type == 1) {
					this.navto(item.url)
				}
			}
		}
	}
</script>

<style lang="scss">
	.pagecon {}

	.top {
		height: 300rpx;
		position: relative;

		&__hb {
			width: 266rpx;
			height: 297rpx;
			position: absolute;
			bottom: 0;
			right: 50rpx;
		}

		&__yun {
			width: 559rpx;
			height: 222rpx;
			position: absolute;
			bottom: -152rpx;
			right: 0;
		}

		&__num {
			font-family: DINNextLTPro;
			font-weight: 500;
			font-size: 95rpx;
			color: #000000;
			line-height: 43rpx;
			margin-left: 43rpx;
		}

		&__text {
			font-family: PingFang-SC, PingFang-SC;
			font-weight: bold;
			font-size: 32rpx;
			color: #000000;
			line-height: 32rpx;
			margin-left: 6rpx;
		}

		&__t {
			font-family: PingFang-SC, PingFang-SC;
			font-weight: 500;
			font-size: 24rpx;
			color: #616065;
			line-height: 24rpx;

			margin: 20rpx 0 30rpx;
			margin-left: 43rpx;
		}

	}

	.box {
		height: 815rpx;
		position: relative;
		background: #FFFFFF;
		border-radius: 30rpx 30rpx 30rpx 30rpx;
		padding: 4rpx 30rpx;

		&__item {
			height: 164rpx;
			display: flex;
			align-items: center;

			&__icon {
				width: 76rpx;
				height: 76rpx;
				margin-right: 20rpx;
			}

			&__name {
				font-family: PingFang-SC, PingFang-SC;
				font-weight: bold;
				font-size: 30rpx;
				color: #1D1D1D;
				line-height: 30rpx;
			}

			&__tip {
				font-family: PingFang-SC, PingFang-SC;
				font-weight: 500;
				font-size: 24rpx;
				color: #1D1D1D;
				line-height: 24rpx;
				margin-top: 14rpx;
			}
		}
	}

	.con {
		// background-color: #f8f8f8;
		padding: 0 32rpx 126rpx;
	}

	.popbox {
		width: 553rpx;
		height: 572rpx;
		position: relative;

		&__bg {
			width: 553rpx;
			height: 572rpx;
			position: absolute;
			top: 0;
			left: 0;
		}

		&__gdcar {
			width: 187rpx;
			height: 224rpx;
			position: absolute;
			top: -129rpx;
			left: 193rpx;
		}

		&__title {
			width: 411rpx;
			height: 115rpx;
			position: absolute;
			top: 115rpx;
			left: 71rpx;
		}

		&__con {
			width: 550rpx;
			height: 281rpx;
			position: absolute;
			top: 225rpx;
			left: 17rpx;

			&__bg {
				width: 550rpx;
				height: 281rpx;
				position: absolute;
				top: 0;
				left: 0;
			}

			&__item {
				width: 407rpx;
				height: 53rpx;
				background: linear-gradient(to right, #fef9fa, #f4c7ce);
				border-radius: 26rpx 26rpx 26rpx 26rpx;
				display: flex;
				align-items: center;
				font-family: PingFang-SC, PingFang-SC;
				font-size: 22rpx;
				color: #601F1F;
				line-height: 22rpx;
				margin-bottom: 20rpx;
				justify-content: center;
			}
		}

		&__text {
			font-family: PingFang-SC, PingFang-SC;
			font-weight: 400;
			font-size: 22rpx;
			color: #601F1F;
			line-height: 22rpx;
			text-align: center;
			padding-top: 489rpx;
			position: relative;
		}

		&__close {
			width: 27rpx;
			height: 28rpx;
			position: absolute;
			bottom: -70rpx;
			left: 263rpx;
		}
	}
</style>